import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:gw_github_flutter/common/global.dart';
import 'package:gw_github_flutter/common/route_name.dart';
import 'package:gw_github_flutter/models/index.dart';
import 'package:sticky_and_expandable_list/sticky_and_expandable_list.dart';

class SliverRouteSideHeader extends StatefulWidget {
  SliverRouteSideHeader({Key? key}) : super(key: key);

  @override
  State<SliverRouteSideHeader> createState() => _SliverRouteSideHeaderState();
}

class _SliverRouteSideHeaderState extends State<SliverRouteSideHeader> {
  final _controller = ExpandableListController();
  var list = Global.getTBSectionsList();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            appBar: AppBar(
              title: Text(
                RouteName.sliverRoute_sideHeader,
                style: TextStyle(fontSize: 14),
              ),
            ),
            body: EasyRefresh.builder(
              onRefresh: () {
                
              },
              childBuilder: (context, physics) {
                return CustomScrollView(
                  physics: physics,
                  slivers: [
                    const HeaderLocator.sliver(),
                    SliverExpandableList(
                      builder: SliverExpandableChildDelegate<dynamic,
                              TbSectionModel>(
                          overlapsContent: true,
                          controller: _controller,
                          sectionList: list,
                          headerBuilder: _buildHeader,
                          itemBuilder:
                              (context, sectionIndex, itemIndex, index) {
                            String item = list[sectionIndex].items?[itemIndex];
                            return Padding(
                              padding: const EdgeInsets.only(left: 50),
                              child: Container(
                                color: Colors.black26,
                                child: ListTile(
                                  title: Text(
                                    item,
                                    style: TextStyle(color: Colors.white),
                                  ),
                                ),
                              ),
                            );
                          },
                          separatorBuilder:
                              (context, isSectionSeparator, index) {
                            return isSectionSeparator
                                ? SizedBox(
                                    height: 15,
                                  )
                                : Container();
                          }),
                    ),
                  ],
                );
              },
            )));
  }

  Widget _buildHeader(BuildContext context, int sectionIndex, int index) {
    return ExpandableAutoLayoutWidget(
        trigger: ExpandableDefaultAutoLayoutTrigger(_controller),
        builder: (context) {
          double opacity = _controller.switchingSectionIndex == sectionIndex
              ? (1 - _controller.percent)
              : 1;
          return Container(
              padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 4),
              child: CircleAvatar(
                backgroundColor: Colors.lightBlue.withOpacity(opacity),
                child: Text(
                  "$sectionIndex",
                  style: TextStyle(color: Colors.white),
                ),
              ));
        });
  }
}
